<template>
    <Layout class="layout-container mask-all">
        <Spin fix v-if="loading" size="large"></Spin>
        <Content>
            <Layout class="layout-container">
                <Sider class="menu-sider-style">
                    <Menu theme="light" style="width: 100%;" :active-name="activeMenuType" @on-select="onMenuTypeSelect">
                        <template v-for="menuType in menuTypes">
                            <MenuItem :name="menuType.value">
                            {{menuType.label}}
                            </MenuItem>
                        </template>
                    </Menu>
                </Sider>
                <Content>
                    <Layout class="layout-container menu-content-style">
                        <div class="padding-bottom" v-if="perms.add">
                            <Button icon="ios-add-circle-outline" @click="onAddClicked" :title="$t('info.add')" />
                        </div>
                        <Content ref="container">
                            <Table row-key="id" :columns="columns" :data="data" :height="height" border></Table>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content, Sider, Spin, Menu, MenuItem, Button, Table, Switch } from 'view-design';
import { dateRender, yesOrNoRender, fit, dicts, perms, extend, each, confirm, createWindow, htmlToText, treeFilter } from 'config/utils';

//数据字典：菜单类型
const MENU_TYPES = "MENU-TYPES";
//数据字典：打开方式
const OPEN_TYPES = "OPEN-TYPES";
//菜单树
const URI_TREE = "/security/api/menu/tree";
//删除
const URI_REMOVE = "/security/api/menu/remove";
//开启关闭接口
const URI_ENABLE = '/security/api/menu/enable';
//添加
const ROUTER_ADD = "sys/menu/add";
//修改
const ROUTER_EDIT = "sys/menu/edit";

export default {
    name: "SysMenuManage",
    data() {
        return {
            loading: true,
            perms: {
                add: false,
                edit: false,
                remove: false
            },
            activeMenuType: '',
            menuTypes: [],
            openTypes: {},
            columns: [{
                    type: "html",
                    title: this.$t('sys.menu.name'),
                    key: 'name',
                    tree: true,
                    width: 240,
                    fixed: 'left'
                }, {
                    title: this.$t('sys.menu.icon'),
                    key: 'icon',
                    minWidth: 300
                },
                {
                    title: this.$t('sys.menu.i18n'),
                    key: 'i18n',
                    width: 200
                }, {
                    title: this.$t('sys.menu.enable'),
                    key: 'enable',
                    align: 'center',
                    width: 120,
                    render: this.edit ? (h, params) => {
                        var value = params.row[params.column.key];
                        return h(Switch, {
                            props: {
                                'value': !!value,
                                'true-value': true,
                                'false-value': false,
                            },
                            on: {
                                'on-change': (newVal) => {
                                    this.enable(params.row, newVal);
                                }
                            }
                        }, [
                            h('span', { slot: 'open' }, this.$t('info.yes')),
                            h('span', { slot: "close" }, this.$t('info.no'))
                        ]);
                    } : yesOrNoRender
                }, {
                    title: this.$t('sys.menu.menuType'),
                    key: 'menuType',
                    align: 'center',
                    width: 120,
                    render: (h, params) => {
                        var value = params.row[params.column.key];
                        return h('span', {}, value ? this.openTypes[value] : this.$t('sys.menu.defaultMenuType'));
                    }
                }, {
                    title: this.$t('sys.menu.router'),
                    key: 'router',
                    minWidth: 200
                }, {
                    key: 'createtime',
                    title: this.$t("sys.createtime"),
                    width: 170,
                    render: dateRender
                }, {
                    key: 'updatetime',
                    title: this.$t("sys.updatetime"),
                    width: 170,
                    render: dateRender
                }
            ],
            data: [],
            height: 200
        };
    },
    methods: {
        onMenuTypeSelect(name) {
            this.loading = true;
            this.activeMenuType = name;
            this.$http.post(URI_TREE, {
                type: name
            }).then((response) => {
                var res = response.data;
                if (res.success) {
                    this.data = res.data.children;
                }
                this.loading = false;
            });
        },
        onAddClicked() {
            this.add({
                id: this.activeMenuType,
                children: this.data
            }, true);
        },
        add(data, root = false) {
            createWindow({
                title: this.$t("sys.menu.title.add"),
                router: ROUTER_ADD,
                params: data,
                height: 600,
                callback: (menu) => {
                    if (root) {
                        data.children.push(menu);
                    } else {
                        const parent = treeFilter(this.data, (item) => {
                            return item.id == data.id;
                        });
                        if (parent.length) {
                            parent[0].children.push(menu);
                        }
                    }
                }
            });
        },
        enable(row, enable) {
            row.enable = enable;
            this.$http.post(URI_ENABLE, {
                id: row.id,
                enable: enable
            }).then((response) => {});
        },
        edit(data) {
            createWindow({
                title: this.$t("sys.menu.title.edit"),
                router: ROUTER_EDIT,
                params: data,
                callback: (menu) => {
                    const rows = treeFilter(this.data, (item) => {
                        return item.id == menu.id;
                    });
                    if (rows.length) {
                        extend(rows[0], menu);
                    }
                }
            });
        },
        remove(row) {
            var me = this;
            confirm("info.confirm.remove", function(isOk) {
                if (isOk) {
                    me.$http.post(URI_REMOVE, {
                        id: row.id
                    }).then((response) => {
                        var res = response.data;
                        if (res.success) {
                            const parents = treeFilter(me.data, (item) => {
                                return item.id == row.type;
                            });
                            if (parents.length) {
                                const parent = parents[0];
                                const index = row._index;
                                if (index > -1 && index < parent.children.length) {
                                    if (parent.children[index].id == row.id) {
                                        parent.children.splice(index, 1);
                                    }
                                }
                            } else {
                                const index = row._index;
                                if (index > -1 && index < me.data.length) {
                                    if (me.data[index].id == row.id) {
                                        me.data.splice(index, 1);
                                    }
                                }
                            }
                        }
                        this.remove();
                    });
                    return false;
                }
            }, true);
        }
    },
    mounted() {
        var params = {
            add: "sys:menu:manager:add",
            edit: "sys:menu:manager:edit",
            remove: "sys:menu:manager:remove"
        };
        perms(params, (isOk, data) => {
            if (isOk) {
                this.perms = data;
            }
            var count = 0;
            if (this.perms.add) {
                count++;
            }
            if (this.perms.edit) {
                count++;
            }
            if (this.perms.remove) {
                count++;
            }
            if (count > 0) {
                this.columns.push({
                    title: this.$t('info.action'),
                    key: 'action',
                    align: 'center',
                    fixed: 'right',
                    width: 36 + 30 * count,
                    render: (h, params) => {
                        const buttons = [];
                        if (this.perms.add) {
                            buttons.push(h(Button, {
                                attrs: {
                                    title: this.$t("info.add")
                                },
                                props: {
                                    type: 'success',
                                    size: 'small',
                                    shape: "circle",
                                    icon: "ios-add-circle-outline"
                                },
                                on: {
                                    click: () => {
                                        this.add(params.row);
                                    }
                                }
                            }));
                        }
                        if (this.perms.edit) {
                            buttons.push(h(Button, {
                                attrs: {
                                    title: this.$t("info.edit")
                                },
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    shape: "circle",
                                    icon: "ios-create-outline"
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.row);
                                    }
                                }
                            }));
                        }
                        if (this.perms.remove) {
                            buttons.push(h(Button, {
                                attrs: {
                                    title: this.$t("info.remove")
                                },
                                props: {
                                    type: 'error',
                                    size: 'small',
                                    shape: "circle",
                                    icon: "ios-remove-circle-outline"
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row);
                                    }
                                }
                            }));
                        }
                        return h('div', buttons);
                    }
                });
            }
            dicts({ values: { menuTypes: [MENU_TYPES], openTypes: [OPEN_TYPES] }, children: true }, (isOk, dict) => {
                if (isOk) {
                    this.menuTypes = dict.menuTypes.children;
                    each(dict.openTypes.children, (item) => {
                        this.openTypes[item.value] = item.label;
                    });
                    this.$nextTick(() => {
                        this.activeMenuType = this.menuTypes[0].value;
                        this.onMenuTypeSelect(this.activeMenuType);
                    });
                }
            });
        });
        this.$nextTick(() => {
            //列表自适应高度
            fit(this.$refs.container, this);
        });
    },
    components: {
        Layout,
        Content,
        Sider,
        Spin,
        Menu,
        MenuItem,
        Table,
        Button
    }
}
</script>
<style type="text/css">
.menu-sider-style {
    padding: 0.2rem;
    background: #808695;
    overflow-x: hidden;
    overflow-y: auto;
}

.menu-sider-style::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1;
}

.menu-content-style {
    padding: 0.2rem;
}
</style>